import React from "react";
import "./Todo.css";
import TodoFooter from "../TodoFooter/TodoFooter";
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import { useState } from "react";
import { useEffect } from "react";
import { nanoid } from "nanoid";
import request from "../../../utils/http";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function Todo() {
  //声明任务列表的状态
  let [todos, setTodos] = useState([]);

  //声明一个函数用来新增任务
  async function addTodo(title) {
    //判断
    if (!title) return;
    //发送 AJAX 请求
    let result = await request.post("/todos", {
      title: title,
      done: false,
    });
    //成功提示
    toast.success("添加成功");
    //更新任务状态
    setTodos([...todos, result]);
  }

  //声明函数用来更新任务的完成状态    checkTodo(2, true);
  async function checkTodo(id, done) {
    //发送请求更新某个任务的完成状态
    await request.patch(`/todos/${id}`, { done: done });
    //创建一个新的数组
    let newTodos = todos.map((item) => {
      //判断
      if (item.id === id) {
        item.done = done;
      }
      return item;
    });
    //更新 todos 状态
    setTodos(newTodos);
  }

  //声明函数 删除任务 removeTodo(2)     pop  shift  splice
  async function removeTodo(id) {
    //发送请求删除指定 id 的任务
    await request.delete(`/todos/${id}`);
    // let newTodos = todos.filter(item => {
    //   //如果当前任务的 id 不等于要删除任务的 id, 则保留
    //   if(item.id !== id) {
    //     return true;
    //   }else{
    //    return false
    //   }
    // });
    let newTodos = todos.filter((item) => item.id !== id);
    //更新状态
    setTodos(newTodos);
  }

  //声明函数 批量修改任务的完成状态  checkAllTodo(true);
  function checkAllTodo(done) {
    //批量处理
    let newTodos = todos.map((item) => {
      item.done = done;
      return item;
    });
    //更新状态
    setTodos(newTodos);
  }

  //声明函数 批量移除已经完成的任务
  function removeDoneTodos() {
    let newTodos = todos.filter((item) => !item.done);
    setTodos(newTodos);
  }

  //测试功能
  useEffect(() => {
    //测试函数
    // addTodo('收拾屋子')
    //测试更新完成状态
    // checkTodo(2, true);
    //测试删除功能
    // removeTodo(2);
    //测试批量状态更新
    // checkAllTodo(true);
    //测试批量删除已经完成的任务
    // removeDoneTodos();
  }, []);

  //发送 AJAX 请求
  useEffect(() => {
    let main = async () => {
      let res = await request.get("/todos");
      setTodos(res);
    };
    //调用 main 函数
    main();
  }, []);

  return (
    <div className="todo-container">
      <ToastContainer />
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain todos={todos} checkTodo={checkTodo} removeTodo={removeTodo} />
        <TodoFooter
          checkAllTodo={checkAllTodo}
          todos={todos}
          removeDoneTodos={removeDoneTodos}
        />
      </div>
    </div>
  );
}
